// 数组响应式
// 替换七个方法
const originalProto = Array.prototype;
// 备份一份，修改备份
const arrayProto = Object.create(originalProto);
["push", "pop", "shift", "unshift"].forEach((method) => {
  arrayProto[method] = function () {
    // 原始操作
    originalProto[method].apply(this, arguments);
    // 覆盖操作,通知更新
    // 结合dep发送notify
  };
});
// 对象响应式
// 对象 属性 初始值
function defineReactive(obj, key, val) {
  // 递归
  observe(val);
  // 对传入obj进行访问拦截
  
  
        val = newVal;
      }
    },
  });
}
// 实现遍历obj
function observe(obj) {
  if (typeof obj !== "object" || obj == null) {
    // 希望传入的是obj
    return;
  }
  // 判断传入的obj的类型
  if (Array.isArray(obj)) {
    // 覆盖原型替换七个变更操作
    obj.__proto__ = arrayProto;
    // 对数组内部大的元素执行响应化
    const keys = Object.keys(obj);
    // 如果数组的元素是对象
    for (let i = 0; i < obj.length; i++) {
      observe(obj[i]);
    }
  } else {
    // 只做了嵌套没有做递归
    Object.keys(obj).forEach((key) => {
      // observe(obj[key]);
      defineReactive(obj, key, obj[key]);
    });
  }
}

// defineReactive(obj, 'foo', 'foo')
// obj.foo
// obj.foo = 'fooooooooooooooooo'

const obj = { foo: "foo", bar: "bar", baz: { a: 1 }, arr: [1, 2, 3] };

// 遍历做响应化处理
observe(obj);

obj.foo;
obj.foo = "fooooooooooooooo";
obj.bar;
obj.bar = "barrrrrrrrrrrrrr";

// obj.baz.a = 10 // no ok
obj.baz = { a: 100 };
obj.baz.a = 100000;
// 新增可以使用defineReactive实现，直接给新增的属性设置单独设置响应式
function set(obj, key, val) {
  defineReactive(obj, key, val);
}
// obj.dong = 'dong'
set(obj, "dong", "dong");
obj.dong;

// Object.defineProperty()对数组无效
// 分析：改变数组方法只有7个
// 解决方案：替换数组实例的原型方法，让他们在修改数组同时还可以通知更新
obj.arr.push(4);
